<!DOCTYPE html>
<html lang="en" data-theme="default">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TechFlow Solutions</title>
    <style>
        /* --- 1. CSS VARIABLES (THEME CONFIGURATION) --- */
        :root {
            /* Defaults (will be overridden by themes) */
            --bg-color: #ffffff;
            --text-color: #333333;
            --card-bg: #f4f4f4;
            --accent-color: #007bff;
            --nav-bg: rgba(255, 255, 255, 0.9);
        }

        /* Black Theme (Dark Mode) */
        [data-theme="black"] {
            --bg-color: #121212;
            --text-color: #e0e0e0;
            --card-bg: #1e1e1e;
            --accent-color: #4dabf7;
            --nav-bg: rgba(18, 18, 18, 0.95);
        }

        /* Purple Theme (Cyber/Modern) */
        [data-theme="purple"] {
            --bg-color: #2d1b4e;
            --text-color: #ffffff;
            --card-bg: #432c7a;
            --accent-color: #d946ef; /* Neon Pinkish Purple */
            --nav-bg: rgba(45, 27, 78, 0.95);
        }

        /* Pink Theme (Soft/Vibrant) */
        [data-theme="pink"] {
            --bg-color: #fff0f5; /* Lavender Blush */
            --text-color: #5c2838;
            --card-bg: #ffffff;
            --accent-color: #db2777; /* Pink */
            --nav-bg: rgba(255, 240, 245, 0.95);
        }

        [data-theme="cyan"] {
            --bg-color: #e0f7fa; /* Cyan */
            --text-color: #004d40;
            --card-bg: #ffffff;
            --accent-color: #00796b; /* Teal */
            --nav-bg: rgba(224, 247, 250, 0.95);
        }

        /* --- GLOBAL STYLES --- */
        body {
            margin: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            transition: background-color 0.3s, color 0.3s;
        }

        /* --- HEADER & CONTROLS --- */
        header {
            position: sticky;
            top: 0;
            background: var(--nav-bg);
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            z-index: 100;
            backdrop-filter: blur(5px);
        }

        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--accent-color);
        }

        .controls {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        select, button {
            padding: 8px 12px;
            border-radius: 5px;
            border: 1px solid var(--text-color);
            background: transparent;
            color: var(--text-color);
            cursor: pointer;
            font-size: 0.9rem;
        }

        button:hover {
            background: var(--accent-color);
            color: white;
            border-color: var(--accent-color);
        }

        /* --- HERO SECTION --- */
        .hero {
            text-align: center;
            padding: 100px 20px;
            max-width: 800px;
            margin: 0 auto;
        }

        .hero h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        .hero p {
            font-size: 1.2rem;
            opacity: 0.8;
            margin-bottom: 2rem;
        }

        .cta-btn {
            background-color: var(--accent-color);
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 25px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .cta-btn:hover {
            transform: scale(1.05);
        }

        /* --- FLOW LAYOUT SECTION (SERVICES) --- */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        .section-title {
            text-align: center;
            margin-bottom: 40px;
            color: var(--accent-color);
        }

        /* The Flow Layout Logic */
        .flow-grid {
            display: flex;
            flex-wrap: wrap; /* This creates the flow */
            gap: 20px;
            justify-content: center;
            margin-top: 40px;
        }

        .card {
            background-color: var(--card-bg);
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            /* Flex grow, shrink, and base width */
            flex: 1 1 300px; 
            max-width: 380px;
            transition: transform 0.3s;
            border: 1px solid rgba(255,255,255,0.1);
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }

        .card h3 {
            margin-top: 0;
            color: var(--accent-color);
        }

        /* --- FOOTER --- */
        footer {
            text-align: center;
            padding: 40px;
            background-color: var(--card-bg);
            margin-top: 50px;
            opacity: 0.8;
        }
    </style>
</head>
<body>

    <!-- Navigation -->
    <header>
        <div class="logo">FlowTech Inc.</div>
        <div class="controls">
            <!-- Theme Switcher -->
            <select id="theme-select" onchange="switchTheme(this.value)">
                <option value="default">Default Theme</option>
                <option value="black">Black Theme</option>
                <option value="purple">Purple Theme</option>
                <option value="pink">Pink Theme</option>
                <option value="cyan">Cyan Theme</option>
            </select>
            
            <!-- Language Switcher -->
            <button onclick="toggleLanguage()">
                <span id="lang-btn-text">CN</span>
            </button>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero">
        <h1 data-i18n="hero_title">Building the Future</h1>
        <p data-i18n="hero_desc">We provide innovative solutions designed to scale with your business needs using flow technology.</p>
        <button class="cta-btn" data-i18n="cta_btn">Get Started</button>
    </section>

    <!-- Services Section (Flow Layout) -->
    <div class="container">
        <h2 class="section-title" data-i18n="services_title">Our Services</h2>
        
        <div class="flow-grid">
            <!-- Card 1 -->
            <article class="card">
                <h3 data-i18n="srv_1_title">Cloud Architecture</h3>
                <p data-i18n="srv_1_desc">Scalable cloud solutions that grow with your user base seamlessly.</p>
            </article>

            <!-- Card 2 -->
            <article class="card">
                <h3 data-i18n="srv_2_title">Data Analytics</h3>
                <p data-i18n="srv_2_desc">Turn raw data into actionable insights with our AI-driven tools.</p>
            </article>

            <!-- Card 3 -->
            <article class="card">
                <h3 data-i18n="srv_3_title">Global Security</h3>
                <p data-i18n="srv_3_desc">Enterprise-grade protection for your digital assets around the clock.</p>
            </article>
        </div>

         <div class="flow-grid">
            <!-- Card 1 -->
            <article class="card">
                <h3 data-i18n="srv_1_title">Cloud Architecture</h3>
                <p data-i18n="srv_1_desc">Scalable cloud solutions that grow with your user base seamlessly.</p>
            </article>

            <!-- Card 2 -->
            <article class="card">
                <h3 data-i18n="srv_2_title">Data Analytics</h3>
                <p data-i18n="srv_2_desc">Turn raw data into actionable insights with our AI-driven tools.</p>
            </article>

            <!-- Card 3 -->
            <article class="card">
                <h3 data-i18n="srv_3_title">Global Security</h3>
                <p data-i18n="srv_3_desc">Enterprise-grade protection for your digital assets around the clock.</p>
            </article>
        </div>

         <div class="flow-grid">
            <!-- Card 1 -->
            <article class="card">
                <h3 data-i18n="srv_1_title">Cloud Architecture</h3>
                <p data-i18n="srv_1_desc">Scalable cloud solutions that grow with your user base seamlessly.</p>
            </article>

            <!-- Card 2 -->
            <article class="card">
                <h3 data-i18n="srv_2_title">Data Analytics</h3>
                <p data-i18n="srv_2_desc">Turn raw data into actionable insights with our AI-driven tools.</p>
            </article>

            <!-- Card 3 -->
            <article class="card">
                <h3 data-i18n="srv_3_title">Global Security</h3>
                <p data-i18n="srv_3_desc">Enterprise-grade protection for your digital assets around the clock.</p>
            </article>
        </div>
    </div>

    <!-- Footer -->
    <footer>
        <p>&copy; 2023 FlowTech Inc. <span data-i18n="rights">All Rights Reserved.</span></p>
    </footer>

    <!-- JAVASCRIPT LOGIC -->
    <script>
        // --- 1. LANGUAGE DATA DICTIONARY ---
        const translations = {
            en: {
                hero_title: "Building the Future",
                hero_desc: "We provide innovative solutions designed to scale with your business needs using flow technology.",
                cta_btn: "Get Started",
                services_title: "Our Services",
                srv_1_title: "Cloud Architecture",
                srv_1_desc: "Scalable cloud solutions that grow with your user base seamlessly.",
                srv_2_title: "Data Analytics",
                srv_2_desc: "Turn raw data into actionable insights with our AI-driven tools.",
                srv_3_title: "Global Security",
                srv_3_desc: "Enterprise-grade protection for your digital assets around the clock.",
                rights: "All Rights Reserved."
            },
            cn: {
                hero_title: "构建未来",
                hero_desc: "我们提供创新的解决方案，利用流技术随您的业务需求扩展。",
                cta_btn: "立即开始",
                services_title: "我们的服务",
                srv_1_title: "云架构",
                srv_1_desc: "可扩展的云解决方案，随用户群无缝增长。",
                srv_2_title: "数据分析",
                srv_2_desc: "利用我们的人工智能工具将原始数据转化为可操作的见解。",
                srv_3_title: "全球安全",
                srv_3_desc: "全天候为您的数字资产提供企业级保护。",
                rights: "版权所有。"
            }
        };

        // Current Language State
        let currentLang = 'en';

        // --- 2. THEME FUNCTION ---
        function switchTheme(themeName) {
            // We switch the theme by changing the data attribute on the HTML tag
            // The CSS handles the color variables based on this attribute
            document.documentElement.setAttribute('data-theme', themeName);
        }

        // --- 3. LANGUAGE FUNCTION ---
        function toggleLanguage() {
            // Toggle state
            currentLang = currentLang === 'en' ? 'cn' : 'en';
            
            // Update Button Text (Show the option to switch TO)
            document.getElementById('lang-btn-text').innerText = currentLang === 'en' ? 'CN' : 'EN';

            // Update Content
            updateContent();
        }

        function updateContent() {
            // Select all elements with the data-i18n attribute
            const elements = document.querySelectorAll('[data-i18n]');
            
            elements.forEach(el => {
                const key = el.getAttribute('data-i18n');
                if (translations[currentLang][key]) {
                    el.innerText = translations[currentLang][key];
                }
            });
        }
    </script>
</body>
</html>